<script setup lang="ts">
import { ref } from 'vue'
import { NAvatar } from 'naive-ui'
import ReplyList from './ReplyList.vue'
import ReplyBox from './ReplyBox.vue'
import type { FlatComment, FlatReply } from '../types/comment'
import { formatDate } from '../utils/format'
import { Icon } from '@iconify/vue'

const { comment } = defineProps<{
  comment: FlatComment
}>()

const emit = defineEmits<{
  (e: 'update:replies', commentId: number, replies?: FlatReply[]): void
  (e: 'reply', data: any): void
}>()

// 回复框显示状态
const showReplyBox = ref(false)

// 处理回复提交
const handleSubmitReply = () => {
  emit('update:replies', comment.id, comment.replies)
}

// 处理回复中的回复
const handleReplyToReply = () => {
  emit('update:replies', comment.id, comment.replies)
}
</script>

<template>
  <div class="comment-item">
    <!-- 根评论 -->
    <div class="comment-root">
      <n-avatar round :size="32" :src="comment.avatar || '/placeholder.jpg'" />
      <div class="comment-content">
        <div class="comment-header">
          <span class="username">{{ comment.userName }}</span>
          <span class="time">{{ formatDate(comment.createdTime) }}</span>
        </div>
        <div class="mt-10px">
          <div class="text-14px">{{ comment.content }}</div>
          <div class="mt-10px flex gap-10px">
            <n-image
              v-for="(url, index) in comment.picUrlList"
              :key="index"
              :src="url"
              class="w-100px h-100px rounded"
            />
          </div>
        </div>
        <div
          class="comment-actions cursor-pointer mt-10px"
          :class="{ active: showReplyBox }"
        >
          <Icon icon="vaadin:comments-o" width="12" height="12" />
          <span @click="showReplyBox = !showReplyBox">{{
            showReplyBox ? '取消回复' : '评论'
          }}</span>
        </div>
      </div>
    </div>

    <!-- 回复框 -->
    <ReplyBox
      v-if="showReplyBox"
      :target="comment"
      @submit="handleSubmitReply"
    />

    <!-- 回复列表 -->
    <ReplyList
      v-if="comment.replies?.length"
      :replies="comment.replies"
      :root-comment-id="comment.id"
      @reply="handleReplyToReply"
    />
  </div>
</template>

<style scoped>
.comment-item {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-root {
  display: flex;
  gap: 10px;
  padding: 0 16px;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.username {
  font-weight: 500;
  font-size: 14px;
  color: #333;
}

.time {
  font-size: 12px;
  color: #999;
}

.comment-text {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
  word-break: break-word;
  color: #333;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #666;
  &:hover {
    color: #1890ff;
  }
  &.active {
    color: #1890ff;
  }
}

.action-btn {
  font-size: 14px;
  color: #666;
  cursor: pointer;
}
</style>
